<!--组件-输入框-->
<template>
  <div class="bg">

    <div class="title" v-if="title">

      <div class="row acenter">
        <text class="font28 text2">{{title}}</text>
        <div class="width8" v-if="comment && comment.length"></div>
        <LImage class="explain" v-if="comment && comment.length" :src="Config.img('wenhao.png')" @click="explainClick"></LImage>
      </div>

      <div class="width8"></div>
      <text class="font24 text3" v-if="limits">{{limits}}</text>
    </div>
    <div :class="['input', 'bg2', this.select ? 'main-b1' : '']">
      <input class="input-content font28 text1" v-model="value" type="number" :placeholder="tips" @input="onInput" @focus="onFocus" @blur="onBlur">
      <div class="input-line no1" v-if="unit"></div>
      <text class="font28 text2" v-if="unit">{{unit}}</text>
    </div>
  </div>
</template>

<script>

import math from "@/_js/math";
import modal from "@/_js/modal";
import Config from "@/_js/config";

const weexFunction = weex.requireModule('WeexFunction');
export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{

    title: {
      type:String,
      default:undefined,
    },

    comment: {
      type:String,
      default:undefined,
    },

    limits: {
      type:String,
      default:undefined,
    },

    tips: {
      type:String,
      default:'',
    },

    unit: {
      type:String,
      default:undefined,
    },

    value: {
      type:String,
      default:'',
    },
  },
  
  data() {
    return {
      Config:Config,
      select:false,
    };
  },

  mounted(){
  },

  methods:{
    
    /**********************************************输入框回调*/
    //输入框-选中
    onFocus(e) {
      this.select = true;
      this.$emit("focus", e);
    },

    //输入框-取消选中
    onBlur(e) {
      this.select = false;
      this.$emit("blur", e);
    },

    //输入内容改变
    onInput(e){
      this.$emit("change", e.value);
      this.$emit("input", e);
    },

    /********************************************** 点击触发*/
    //说明点击
    explainClick(){
      var parm = {'message':this.comment};
      modal.alert(parm,(bool)=>{
        navigator.back();
      });
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg{
  width: 670px;
}

.title{
  flex-direction: row;
  align-items: flex-end;
  margin-bottom: 20px;
}

.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}


.input{
  flex-direction: row;
  align-items: center;

  height: 88px;
  border-radius: 16px;

  border-width: 2px;
  border-color: transparent;

  padding-left: 40px;
  padding-right: 40px;
}

.input-content{
  flex: 1;
  height: 88px;
  placeholder-color:#6E7488;
}

.input-line{
  width: 2px;
  height: 32px;
  margin-left: 20px;
  margin-right: 20px;
}

.width8{
  width: 8px;
}
</style>
